<style>
.fixed{ position: fixed; }
.container-index {max-width: 1210px;margin: 0 auto;padding:0!important;}
.slide .cont{width:90%; margin:0 auto; padding: 195px 0 50px;}
.slide .btn a{width:50%;float: left;font-size:18px;color:#fff;}
.slide .btn a span{border:1px solid #fff;border-radius: 5px;position:relative; display: block;width:9rem;height:2.8rem; margin: 0 auto;line-height:2.5rem;}
.slide .btn a span.down{margin-right: .4rem;}
.slide .btn a span.user{margin-left: .4rem;}
.slide .btn a span:hover{background:#18bc9c;border:1px solid #18bc9c;}
.slide .btn a span img{left: 1.2rem;top: 50%;margin-top: -.6rem;width: 1.1rem;}
.slide .btn a span em{    padding-left: 3rem;font-size: 1.2rem;}
.slide .cont-btn{position:absolute;z-index:4999;    width: 100%;left:0;top: 350px;}
.slide .btn{width:100%!important;}
.slide .btn a span img{left: 30px;margin-top: -13px;width: auto;}
.slide .cont{padding:263px 0 70px;}
.slide .btn a span{border:1px solid #fff;border-radius: 5px;position:relative; display: block;width:180px;height:50px; margin: 0 auto;line-height:50px;}
.slide .btn a span.down{margin-right: 14px;}
.slide .btn a span em{padding-left: 24px;font-size:18px;}  
.top-nav {width:100%;top:0;z-index: 4999;padding: 0; background: none;box-shadow: none;height: 71px;overflow:hidden}
.top-nav .cont{margin-left:40px;display: block}
.top-nav.active{background:#fff;box-shadow: 0 0 5px 2px rgba(0,0,0,.1);}
.top-nav.active .cont a{color:#333 !important;}
.top-nav .cont ul li{float: left;padding: 18px 10px;margin:0 18px;display: block;line-height:36px}
.top-nav .cont ul li a{color:#fff;font-size:16px;}
.top-nav .cont ul li a.active{border-bottom:1px solid #fff;}
.top-nav.active ul li a.active{border-bottom:1px solid #0089fb;color:#0089fb!important;}
.header-plans-con{padding: 20px 0;margin-left:0px;overflow:hidden;}
.header-plans-item{width: 25%; margin-top: 0px; float: left; border-right: 1px solid rgba(255,255,255,0.1); box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */}
.header-plans-item:last-child{border-right:none;}
.header-plans-item h3{font-size: 20px;color: #fff;font-weight:bold}
.header-plans-item p{margin:18px; font-size: 15px; color: #fff;}
.border-l-r{display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-top: 4px solid \9; border-right: 4px solid transparent; border-left: 4px solid transparent;}
.submnu{position: absolute; z-index: 6; background-color: rgba(0,0,0,0.7); display: none; left: 0; right: 0;top:72px; height:300px;}
</style>
<nav ng-if="main.istakeover !=1" ng-class="{'top-nav fixed':1,'active':pagedata.site.closed_hdp ==1 || page.action=='user.login' || page.action=='user.register'}">
    <div class="container-index">
        <a href="./index.php?plugin=core&action=home.welcome" class="l pt10"><img align="absmiddle" ng-src="{{tomedia(pagedata.site.llogo,true) || '../core/resource/images/ng-logo.png'}}" style="max-width:160px;height:52px;margin:10px"/></a>
        <div class="l cont" style="margin-left:0;max-width:730px;height: 71px;">
            <ul>
                <li ng-class="{'active':page.action=='home.welcome'}">
					<a href="./index.php?plugin=core&action=home.welcome">首页</a>
				</li>
				<li ng-if="pagedata.site.noapps !=1" id="plans" onmouseover="hovermous($(this))" onmouseleave="overmous($(this))" class="imenu l">
                    <a href="javascript:void(0);" class="">解决方案
                        <span class="border-l-r"></span></a>
						<div class="submnu">
							<div style="" id="pf">
								<div class="container-index">
									<div class="header-plans-con">
										<div class="li" ng-if="pagedata.site.plans.length>0">
											<div class="header-plans-item" ng-repeat="item in pagedata.site.plans">
												<a class="pc-class-box t-c" href="javascript:;" ng-click="access_json(item.action)">
													<h3><i class="icon {{item.icon || 'icon-all'}}" style="color:#fff"></i> {{item.title}}</h3>
													<p>{{item.desc}}</p>
												</a>
											</div>
										</div>
										<div class="li" ng-if="!pagedata.site.plans || pagedata.site.plans.length<1">
											<div class="header-plans-item">
												<a class="pc-class-box t-c" href="javascript:;" ng-click="access_json('core/home.plugin/')">
													<h3><i class="icon {{item.icon || 'icon-all'}}" style="color:#fff"></i> 公众号解决方案</h3>
													<p>商城、社区、上门服务、投票、周圈微信公众号</p>
												</a>
											</div>
											<div class="header-plans-item">
												<a class="pc-class-box t-c" href="javascript:;" ng-click="access_json('core/home.diy_wxapp/')">
													<h3><i class="icon {{item.icon || 'icon-all'}}" style="color:#fff"></i> 小程序DIY方案</h3>
													<p>一键打包，DIY小程序，一托多小程序！</p>
												</a>
											</div>
											<div class="header-plans-item">
												<a class="pc-class-box t-c" href="javascript:;" ng-click="access_json('core/home.wxapp/')">
													<h3><i class="icon {{item.icon || 'icon-all'}}" style="color:#fff"></i> 应用小程序方案</h3>
													<p>电商分销、拼团、砍价、秒杀各类小程序</p>
												</a>
											</div>
											<div class="header-plans-item">
												<a class="pc-class-box t-c" href="javascript:;" ng-click="access_json('core/home.pc/')">
													<h3><i class="icon {{item.icon || 'icon-all'}}" style="color:#fff"></i> PC建站解决方案</h3>
													<p>DIY设计PC站，几乎可以搭建出任何主流PC站！</p>
												</a>
											</div>
											<div class="header-plans-item">
												<a class="pc-class-box t-c" href="javascript:;" ng-click="access_json('core/home.mobile/')">
													<h3><i class="icon {{item.icon || 'icon-all'}}" style="color:#fff"></i> 微官网解决方案</h3>
													<p>DIY设计微官网，手机网站，几乎可以搭建出任何主流手机网站！</p>
												</a>
											</div>
											<div class="header-plans-item">
												<a class="pc-class-box t-c" href="javascript:;" ng-click="access_json('core/home.h5/')">
													<h3><i class="icon {{item.icon || 'icon-all'}}" style="color:#fff"></i> H5场景解决方案</h3>
													<p>朋友圈疯传的H5微场景</p>
												</a>
											</div>
											<div class="header-plans-item">
												<a class="pc-class-box t-c" href="javascript:;" ng-click="access_json('core/home.webapp/')">
													<h3><i class="icon {{item.icon || 'icon-all'}}" style="color:#fff"></i> APP解决方案</h3>
													<p>手动打包APP,更稳定,更强大！</p>
												</a>
											</div>
											<div class="header-plans-item">
												<a class="pc-class-box t-c" href="javascript:;" ng-click="access_json('core/home.h5game/')">
													<h3><i class="icon {{item.icon || 'icon-all'}}" style="color:#fff"></i> 活动营销解决方案</h3>
													<p>互动营销活动，吸粉，变现游戏！</p>
												</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
                </li>
				<li ng-if="pagedata.site.closed_navs != 1" ng-repeat="item in pagedata.site.navs" ng-class="{'active':show_active(item.action)}">
					<a href="javascript:;" ng-click="access_json(item.action)">{{item.title}}</a>
				</li>
				<li ng-if="!pagedata.site.navs || pagedata.site.navs.length <1" ng-class="{'active':show_active('core/home.plugin/')}">
					<a href="javascript:;" ng-click="access_json('core/home.plugin/')">应用市场</a>
				</li>
				<li ng-if="!pagedata.site.navs || pagedata.site.navs.length <1" ng-class="{'active':show_active('core/home.product_list/')}">
					<a href="javascript:;" ng-click="access_json('core/home.group_store/')">产品套餐</a>
				</li>
				<li ng-if="!pagedata.site.navs || pagedata.site.navs.length <1" ng-class="{'active':show_active('core/home.news/')}">
					<a href="javascript:;" ng-click="access_json('core/home.news/')">新闻动态</a>
				</li>
            </ul>
        </div>
		<div class="r cont">
			<ul>
				  <li ng-class="{'active':show_active('core/home.abouts/')}">
					<a href="javascript:;" ng-click="access_json('core/home.abouts/')">关于我们</a>
				  </li>
				  <li>
					<a href="javascript:;" ng-if="!username" ng-click="access_json('core/user.login/')"><i class="fa fa-user"></i> 立即登录</a>
					<a href="javascript:;" ng-if="username" ng-click="access_json('core/account.welcome/')"><i class="fa fa-exchange"></i> 进入后台</a>
				  </li>
			 <ul>
		</div>
    </div>
</nav>
<script>
//首页导航菜单
$(function() {
    console.log('start');console.log($('#plans'));
	window.hovermous = function(div) {
		if(scope.pagedata.isshow_plans==1){
			return false;
		}
		//console.log('212121')
        var it = div.attr('attr');
        if (it === 'undefined') return false;
        var heht = div.find('#' + it).height() +330 + "px";
        //alert($(this).find('#' + it).height());
        div.find('.submnu').height(heht);
        div.stop().find('.submnu').animate({
            height: 'show'
        }, {
            queue: false,
            duration: 500,
        });
        div.stop().attr('class', 'imenu_on').siblings().attr('class', 'imenu');
		div.onmousemove='';
		scope.pagedata.isshow_plans=1;
    }
	window.overmous = function(div) {
		div.stop().find('.submnu').hide();
        div.stop().attr('class', 'imenu');
		scope.pagedata.isshow_plans=0;
	}
	//顶部
	
	$(window).scroll(function() {
		if(scope.pagedata.site.closed_hdp !=1 && scope.page.action!='user.login' && scope.page.action!='user.register'){
		   if ($(window).scrollTop() > 10) {
				$(".top-nav").addClass("active");
			} else {
				$(".top-nav").removeClass("active");
			}
		}
	});
});
</script>